بسم الله الحق

تا چند سال پیش معمولا باب بود که قالب ها را سه ستونه بزنند . منوی اصلی سایت را هم میگذاشتند سمت راست سایت و تمام بخش های سایت را در آن ردیف می کردند . اما چند سالی است در جهت صرفه جویی در فضای صفحه ، منوی افقی استفاده بیشتری پیدا کرده است و از طرفداران بسیاری برخوردار شده است . 

متاسفانه منوی پیش فرض جوملا به صورت عمودی است برای همین اغلب برای طراحی قالب با منوی افقی ناگزیر به استفاده از انواع و اقسام ماژول هایی هستیم که علاوه بر منوی افقی هزار و یک حرکت ژانگولر دیگر هم روی منو انجام می دهند . در مواردی که قصد داریم منو هایی با جلوه های ویژه مثل منوی آبشاری و زیر مجموعه دار و .... طراحی کنیم ناگزیریم از این ماژول ها استفاده کنیم ولی در مواردی که فقط دنبال یک منوی افقی ساده بدون حاشیه و زیر مجموعه و اینها باشیم (که در بیشتر موارد هم دنبال همین منو هستیم ) با انجام سه  حرکت ساده در css قالب می توانیم به راحتی به منوی افقی ساده و با کلاسی دست پیدا کنیم . 

حرکت اول : ابتدا دنبال تگ حاوی منو در قالب اصلی سایت می گردیم.برای این کار می توانیم منبع اچ تی ام ال صفحه را در مرور گر خود باز کنیم و با رصد قدم به قدم تگ ها ، نام تگ مورد نظر خود را پیدا کنیم . در این مورد استفاده از مرور گر google chrom و ابزار رویایی Developer Tool آن اکیدا توصیه می شود .البته در مواردی که خودتان قالب را از صفر طراحی می کنید کار خیلی راحت تر است  .خب حالا فرض می کنیم منوی ما در تگ topMenu قرار دارد . 

حرکت دوم : ویژگی list-style-type مربوط به تگ ul آن را به none تغییر می دهیم تا بالت های کنار هر گزینه را برداریم . مانند کد زیر :

#topMenu ul 

}

list-style-type:none;

{

حرکت سوم : کافی است ویژگی display مربوط به li همین تگ را به inline تغییر دهیم  تا گزینه های منو  در یک ردیف کنار هم قرار بگیرند و از حالت عمودی خارج شوند . مانند کد زیر :

#topMenu li 

}

display:  inline;

{

خب حالا یک منوی افقی ساده داریم با کمی زیرکی و یکی دو طرفند دیگر در همان کد css می توانیم یک منوی بسیار زیبا و جذاب و حرفه ای داشته باشیم .